<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in news" :key="index" @click="openinfo" :data-newsid="item.post_id">
        <view class="uni-media-list">
          <image class="uni-media-list-logo" :src="item.author_avatar"></image>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{item.title}}</view>
            <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				news:[]
			}
		},
		onLoad: function() {
		  uni.showLoading({
		    title: "加载中...."
		  })
		  uni.request({
		    url: 'https://unidemo.dcloud.net.cn/api/news',
		    method: 'GET',
		    data: {},
		    success: res => {
		      this.news = res.data;
		      uni.hideLoading();
		    },
		    fail: () => {},
		    complete: () => {}
		  });
		},
		methods: {
		  openinfo(e) {
		    console.log(e);
		    var newsid = e.currentTarget.dataset.newsid;
		    uni.navigateTo({
		      url: '../detail/detail?newsid=' + newsid
		    });
		  }
		},
		
	}
</script>

<style>
    .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
	.uni-media-list-body{
		height: auto;
	}
	.uni-media-list-text-top{
		line-height:1.6em;
	}
</style>

